<template>
	<sw-common-frame :count="dataCount" :loading="loading">
		<el-upload slot="button" :action="uploadAction" :headers="uploadHeaders" v-bind="uploadConfig">
			<el-button size="small" type="primary" icon="el-icon-plus" :loading="uploadLoading">资源上传</el-button>
		</el-upload>
		<el-form slot="query" size="small" inline>
			<el-form-item>
				<el-input v-model="queryData.name" clearable placeholder="资源名称" style="width: 180px"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="queryTableData()">查询</el-button>
			</el-form-item>
		</el-form>
		<el-table slot="table" size="medium" ref="table" :data="tableData" stripe height="100%">
			<el-table-column label="缩略图" width="68">
				<template slot-scope="{ row }">
					<svg-icon :icon-name="row.des | fileTypeIcon" size="48"></svg-icon>
				</template>
			</el-table-column>
			<el-table-column label="资源名称" prop="name" min-width="160" />
			<el-table-column label="资源大小" min-width="160">
				<template slot-scope="{ row }">
					{{ row.size | sizeFilter }}
				</template>
			</el-table-column>
			<el-table-column label="资源类型" prop="sysAttachment.attrSuffixStr" min-width="160" />
			<el-table-column label="创建时间" prop="createTime" min-width="160" />
			<el-table-column label="操作" width="186">
				<el-button-group slot-scope="{ row }">
					<el-button size="mini" type="success" @click="handlePreviewData(row)">预览</el-button>
					<el-button size="mini" type="warning" @click="handleDownloadData(row)">下载</el-button>
					<el-button size="mini" type="danger" @click="handleDeleteData(row)">删除</el-button>
				</el-button-group>
			</el-table-column>
		</el-table>
		<template slot="page">
			<sw-pagination :total="dataCount" :page.sync="queryData.page" :limit.sync="queryData.limit" @change="queryTableData()"></sw-pagination>
		</template>
	</sw-common-frame>
</template>

<script>
import { mapGetters } from 'vuex';
import fileFormat from '@/utils/fileFormat';
import listMixins from '@/mixins/listMixins';
import { queryPageList, addCourseFiles, delCourseFiles } from '@/api/course/sysCourseFiles';
export default {
	beforeRouteEnter(to, from, next) {
		to.meta['hasBack'] = true;
		next();
	},
	mixins: [listMixins],
	props: {
		courseId: { type: String, default: '' }
	},
	data() {
		const baseUrl = process.env.VUE_APP_BASEURL;
		return {
			pageName: '课程文件',
			uploadAction: `${baseUrl}/tbSysAttachment/upload`,
			uploadConfig: {
				limit: 1,
				ref: 'upload',
				showFileList: false,
				style: { '--width': '0%' },
				class: 'upload_course_file',
				onError: this.handleUploadError,
				onSuccess: this.handleUploadSuccess,
				onProgress: this.handleUploadProgress,
				beforeUpload: this.handleBeforeUpload
			},
			uploadLoading: false
		};
	},
	computed: {
		...mapGetters(['token']),
		requestParams() {
			return { ...this.queryData, courseId: this.courseId };
			/* let params = { type: this.activeName };
			params['courseId'] = this.courseId;
			return { ...params, ...this.queryData }; */
		},
		listFunction() {
			return eval(queryPageList);
		},
		uploadHeaders() {
			return { Authorization: this.token };
		},
		deleteFunction() {
			return eval(delCourseFiles);
		}
	},
	watch: {
		activeName: {
			handler(val) {
				this.queryTableData();
			},
			immediate: true
		}
	},
	methods: {
		//上传文件前
		handleBeforeUpload(file) {
			this.uploadLoading = true;
		},

		//上传文件成功
		async handleUploadSuccess(response, file, fileList) {
			this.uploadLoading = false;
			if (response.code === '0') {
				let fileData = this.$detailData(response.data);
				let params = { type: this.activeName, courseId: this.courseId };
				this.addedCourseFileRequest(params, fileData.id);
			}
		},

		//上传文件进度
		handleUploadProgress(event, file, fileList) {
			let percent = { '--width': file.percentage + '%' };
			this.$set(this.uploadConfig, 'style', percent);
		},

		//上传文件失败
		handleUploadError(err, file, fileList) {
			console.log(err);
		},

		//添加附件请求
		async addedCourseFileRequest(data, fileId) {
			let params = { ...data, fileId };
			let result = await addCourseFiles(params).then((res) => res.data);
			if (result.code === '0') {
				this.$message.success('上传成功');
				this.queryTableData();
			}
		},

		//预览附件
		handlePreviewData(data) {
			let typeData = fileFormat.find((n) => n.value.inArray(data.des));
			this.$bus.$emit('filePreview', data, typeData.type);
		},

		//下载附件
		handleDownloadData(data) {
			let baseUrl = process.env.VUE_APP_BASEURL;
			let httpUrl = data.sysAttachment?.httpUrl;
			let attachUrl = this.$removeUrlDomain(httpUrl);
			this.$fileDownload(`${baseUrl}${attachUrl}`, data.name, {});
		}
	}
};
</script>

<style lang="scss" scoped>
.attach_manage_wrapper::v-deep {
	.el-tabs__header {
		margin-bottom: 0;
	}
	.el-tabs__item {
		font-size: 15px;
		padding: 0 16px !important;
		&.is-active {
			font-weight: bold;
		}
	}
	.content {
		height: calc(100% - 40px);
	}
}
.upload_course_file {
	position: relative;
	overflow: hidden;
	.el-button.is-loading:before {
		right: auto;
		width: calc(var(--width) + 2px);
	}
}
</style>
